export default formData => {
  // 菜单目录切换
  const handleMenuTypeChange = ({ value }) => {
    let formKey = [];
    switch (value) {
      case 1:
        formKey = [
          "parentId",
          "name",
          "category",
          "icon",
          "activeIcon",
          "path",
          "redirect",
          "sorted",
          "visible",
          "status",
        ];
        break;
      case 2:
        formData.value.menuType = "F";
        formKey = [
          "parentId",
          "name",
          "category",
          "icon",
          "activeIcon",
          "path",
          "component",
          "componentName",
          "sorted",
          "visible",
          "status",
          "keepAlive",
          "alwaysShow",
          "appCode",
          "authKey",
          "fullScreen",
        ];
        break;
      case 3:
      case 4:
        formKey = ["parentId", "name", "category", "authKey", "sorted", "status", "appCode", "authKey"];
        break;
    }
    // 动态显示隐藏表单项，并清空隐藏项的值
    let column = tableOption.value.group[0].column;
    for (let key in column) {
      if (formKey.includes(key)) column[key].display = true;
      else {
        column[key].display = false;
        column[key].type === "radio" ? (formData.value[key] = 0) : (formData.value[key] = "");
      }
    }
    // 判断菜单图标是否是必填
    handleIsShowIcon(formData.value.parentId, value);
  };

  // 是否显示图标
  const handleIsShowIcon = (parentId, category) => {
    const column = tableOption.value.group[0].column;
    if (parentId === 0 && [1, 2].includes(category)) {
      column.icon.display = true;
      column.activeIcon.display = true;
    } else {
      column.icon.display = false;
      column.activeIcon.display = false;
    }
  };

  // 父级菜单切换，更新菜单类型
  const handleParentIdChange = parentId => {
    const column = tableOption.value.group[0].column;
    // 根据 parentId 从树形菜单中获取菜单类型
    const findMenu = (menuList = []) => {
      for (let item of menuList) {
        if (item.value === parentId) {
          return item;
        }
        if (item.children) {
          const found = findMenu(item.children);
          if (found) return found;
        }
      }
    };

    // 获取父级菜单
    const parentMenu = findMenu(column.parentId.dicData);

    // 情况 1. 如果父级菜单是菜单类型，子菜单不能是目录类型和菜单类型
    if (parentMenu && parentMenu.category === 2) {
      column.category.dicData = column.category.dicData.map(item => {
        return {
          ...item,
          disabled: [1, 2].includes(item.value),
        };
      });
      if ([1, 2].includes(formData.value.category)) {
        formData.value.category = 4;
      }
    }
    // 情况 2. 如果父级菜单是Tab栏类型，子菜单只能是按钮类型
    else if (parentMenu && parentMenu.category === 3) {
      column.category.dicData = column.category.dicData.map(item => {
        return {
          ...item,
          disabled: item.value !== 4,
        };
      });
      if (formData.value.category !== 4) formData.value.category = 4;
    } else {
      // 否则启用所有类型
      column.category.dicData = column.category.dicData.map(item => {
        return {
          ...item,
          disabled: false,
        };
      });
    }
  };

  // 搜索配置
  const searchOption = ref({
    formConfig: {
      // 菜单名称
      name: {
        label: "菜单名称",
      },
      // 菜单状态
      status: {
        label: "菜单状态",
        component: "el-select",
        dicData: [
          { label: "启用", value: 1 },
          { label: "禁用", value: 0 },
        ],
      },
    },
  });

  // 表格配置
  const tableOption = ref(
    Utils.tools.deleteSearchConfig({
      // 弹窗宽度
      dialogWidth: "50%",
      // 是否显示编辑按钮
      editBtn: false,
      // 是否显示删除按钮
      delBtn: false,
      // 菜单宽度 单个按钮 52px 按钮容器内边距 8px 例如：4个按钮 = 52 * 4 * 8
      menuWidth: 52 * 3 + 8,
      // 对齐方式
      align: "left",
      // 行主键 key
      rowKey: "id",
      // 父主键 key
      rowParentKey: "parentId",
      // label宽度
      labelWidth: 98,
      // 表单间距
      gutter: 24,
      // 表格配置
      column: {
        // 菜单名称
        name: {
          label: "菜单名称",
          width: 280,
          display: false,
        },
        // 排序
        sorted: {
          label: "排序",
          width: 120,
          align: "center",
          display: false,
        },
        // 菜单类型
        category: {
          label: "菜单类型",
          width: 120,
          align: "center",
          display: false,
          dicData: [
            { label: "目录", value: 1 },
            { label: "菜单", value: 2 },
            { label: "Tab栏", value: 3 },
            { label: "按钮", value: 4 },
          ],
        },
        // 权限标识
        authKey: {
          label: "权限标识",
          minWidth: 200,
          display: false,
        },
        // 组件路径
        component: {
          label: "组件路径",
          minWidth: 200,
          display: false,
          showOverflowTooltip: true,
        },
        // 组件名称
        componentName: {
          label: "组件名称",
          minWidth: 150,
          display: false,
        },
        // 状态
        status: {
          label: "状态",
          width: 120,
          align: "center",
          display: false,
          dicData: [
            { label: "启用", value: 1 },
            { label: "停用", value: 0 },
          ],
        },
      },
      // 表单配置
      group: [
        {
          column: {
            parentId: {
              label: "上级菜单",
              type: "tree",
              value: 0,
              span: 24,
              filterable: true,
              change: ({ value }) => {
                // 父级菜单切换，更新菜单类型
                handleParentIdChange(value);
                // 判断菜单图标是否是必填
                handleIsShowIcon(value, formData.value.category);
              },
              rules: [{ required: true, message: "请选择上级菜单", trigger: "blur" }],
            },
            category: {
              label: "菜单类型",
              type: "radio",
              value: 1,
              span: 24,
              button: true,
              dicData: [
                { label: "目录", value: 1 },
                { label: "菜单", value: 2 },
                { label: "Tab栏", value: 3 },
                { label: "按钮", value: 4 },
              ],
              change: handleMenuTypeChange,
              rules: [{ required: true }],
            },
            name: {
              label: "菜单名称",
              type: "input",
              rules: [
                { required: true, message: "请输入菜单名称", trigger: "blur" },
                { min: 2, max: 6, message: "菜单名称长度只能在2-6个字符之间", trigger: "blur" },
              ],
            },
            sorted: {
              label: "菜单排序",
              align: "center",
              type: "number",
              controls: false,
              value: 1,
              rules: [
                { required: true, message: "请输入菜单排序", trigger: "blur" },
                // 校验菜单排序必须为数字
                { pattern: /^[0-9]*$/, message: "菜单排序必须为数字", trigger: "blur" },
              ],
            },
            path: {
              label: "路由地址",
              span: 24,
              type: "input",
              rules: [
                { required: true, message: "请输入路由路径", trigger: "blur" },
                // 如果 parentId 是 0 则路由地址必须以 / 开头，如果 parentId 不是 0 则路由地址不能以 / 开头
                {
                  validator: (rule, value, callback) => {
                    if (formData.value.parentId === 0 && !value.startsWith("/")) {
                      callback(new Error("一级菜单路由地址必须以 / 开头"));
                    } else if (formData.value.parentId !== 0 && value.startsWith("/")) {
                      callback(new Error("二级菜单路由地址不能以 / 开头"));
                    } else {
                      callback();
                    }
                  },
                  trigger: "blur",
                },
                // 校验路由地址不能有空格
                {
                  pattern: /^\S*$/,
                  message: "路由地址不能有空格",
                  trigger: "blur",
                },
              ],
            },
            component: {
              label: "组件路径",
              type: "select",
              span: 24,
              display: false,
              filterable: true,
              labelTip: "访问的组件路径，如：`system/user/index`，默认在`views`目录下",
              rules: [
                {
                  required: true,
                  validator: (rule, value, callback) => {
                    if (formData.value.parentId === 2 && !value) {
                      callback(new Error("请选择路由组件"));
                    } else {
                      callback();
                    }
                  },
                  trigger: "change  ",
                },
              ],
            },
            icon: {
              label: "菜单图标",
              component: "IconSelector",
              placeholder: "请选择 菜单图标",
              rules: [{ required: true, message: "请选择菜单图标", trigger: "change" }],
            },
            activeIcon: {
              label: "激活图标",
              component: "IconSelector",
              placeholder: "请选择 激活图标",
              rules: [{ required: true, message: "请选择激活图标", trigger: "change" }],
            },
            componentName: {
              label: "路由名称",
              type: "input",
              rules: [
                { required: true, message: "请输入路由名称", trigger: "blur" },
                { pattern: /^[A-Za-z]+$/, message: "路由名称只能是英文字符", trigger: "blur" },
                // 校验路由名称必须是大驼峰命名法
                {
                  validator: (rule, value, callback) => {
                    if (value) {
                      const isPascalCase = /^[A-Z][A-Za-z0-9]*$/.test(value);
                      if (!isPascalCase) {
                        callback(new Error("路由名称建议使用大驼峰命名法"));
                      } else {
                        callback();
                      }
                    } else {
                      callback();
                    }
                  },
                  trigger: "blur",
                },
              ],
              labelTip: "建议使用大驼峰命名法，如：`User`、`RoleAuth`",
            },
            keepAlive: {
              label: "页面缓存",
              type: "radio",
              value: 0,
              dicData: [
                { label: "是", value: 1 },
                { label: "否", value: 0 },
              ],
              rules: [{ required: true }],
              labelTip: "选择是则会被`keep-alive`缓存，需要匹配组件的`name`和地址保持一致",
            },
            redirect: {
              label: "路由定向",
              type: "input",
            },
            appCode: {
              label: "应用编码",
              type: "input",
              rules: [{ required: true, message: "请输入应用编码", trigger: "blur" }],
            },
            authKey: {
              label: "权限标识",
              type: "input",
              rules: [{ required: true, message: "请输入权限标识", trigger: "blur" }],
            },
            alwaysShow: {
              label: "是否固定",
              type: "radio",
              value: 0,
              dicData: [
                { label: "是", value: 1 },
                { label: "否", value: 0 },
              ],
              rules: [{ required: true }],
              labelTip: "选择是则 tagsView 不可关闭，固定在 tagsView 栏上",
            },
            visible: {
              label: "是否显示",
              type: "radio",
              value: 1,
              dicData: [
                { label: "显示", value: 1 },
                { label: "隐藏", value: 0 },
              ],
              rules: [{ required: true }],
              labelTip: "选择隐藏则路由将不会出现在侧边栏，但仍然可以访问",
            },
            status: {
              label: "菜单状态",
              type: "radio",
              value: 1,
              dicData: [
                { label: "开启", value: 1 },
                { label: "关闭", value: 0 },
              ],
              rules: [{ required: true }],
              labelTip: "选择停用则路由将不会出现在侧边栏，也不能被访问",
            },
            fullScreen: {
              label: "是否全屏",
              type: "radio",
              value: 0,
              dicData: [
                { label: "是", value: 1 },
                { label: "否", value: 0 },
              ],
              rules: [{ required: true }],
              labelTip: "选择路由是否以全屏模式展示，不显示顶部和侧边栏",
            },
          },
        },
      ],
    })
  );

  return { searchOption, tableOption };
};
